<template>
  <div class="notes-container">
    <!-- 顶部导航栏 -->
    <header class="notes-header">
      <div class="header-content">
        <div class="home-icon" @click="goToHome" title="返回主页">
          <i class="fas fa-home"></i>
        </div>
        <div class="logo">
          <i class="fas fa-book-open"></i>
          <span>生活笔记</span>
        </div>
        <div class="search-container">
          <i class="fas fa-search"></i>
          <input 
            type="text" 
            placeholder="搜索笔记..." 
            v-model="searchQuery"
            @input="filterNotes"
          >
        </div>
        <button class="new-note-btn" @click="openEditor">
          <i class="fas fa-plus"></i> 新建笔记
        </button>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="notes-main">
      <section class="hero">
        <h1>记录生活点滴</h1>
        <p>在这里记录您的日常生活、旅行见闻、读书心得和灵感闪现</p>
      </section>
      
      <!-- 分类导航 -->
      <div class="categories">
        <button 
          v-for="category in categories" 
          :key="category.id"
          :class="['category-btn', { active: selectedCategory === category.id }]"
          @click="selectCategory(category.id)"
        >
          {{ category.name }}
        </button>
      </div>
      
      <!-- 笔记列表 -->
      <div class="content">
        <div v-if="filteredNotes.length === 0" class="empty-state">
          <i class="fas fa-book"></i>
          <h3>暂无笔记</h3>
          <p>当前分类和搜索条件下没有找到匹配的笔记，点击"新建笔记"开始记录</p>
        </div>
        
        <div 
          v-for="note in filteredNotes" 
          :key="note.id" 
          class="note-card"
          @click="viewNoteDetail(note)"
        >
          <div class="card-image" :style="{ background: note.bgColor }">
            <i :class="note.icon"></i>
          </div>
          <div class="card-content">
            <span class="card-category">{{ getCategoryName(note.category) }}</span>
            <h3 class="card-title">{{ note.title }}</h3>
            <div class="card-excerpt" v-html="note.excerpt"></div>
            <div class="card-meta">
              <span><i class="far fa-calendar"></i> {{ formatDate(note.date) }}</span>
              <span><i class="far fa-clock"></i> {{ note.readTime }}分钟阅读</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="stats">
        <div class="stat-card">
          <i class="fas fa-book"></i>
          <div class="number">{{ notes.length }}</div>
          <div class="label">笔记总数</div>
        </div>
        <div class="stat-card">
          <i class="fas fa-tags"></i>
          <div class="number">{{ categories.length }}</div>
          <div class="label">分类数量</div>
        </div>
        <div class="stat-card">
          <i class="fas fa-pen-fancy"></i>
          <div class="number">{{ totalWords.toLocaleString() }}</div>
          <div class="label">累计字数</div>
        </div>
      </div>
    </main>
    
    <!-- 笔记编辑器模态框 -->
    <div v-if="showEditor" class="editor-modal">
      <div class="editor-container">
        <div class="editor-header">
          <h3>{{ editingNote ? '编辑笔记' : '新建笔记' }}</h3>
          <button class="close-btn" @click="closeEditor">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="editor-body">
          <input 
            type="text" 
            class="note-title" 
            v-model="currentNote.title" 
            placeholder="笔记标题"
          >
          <select v-model="currentNote.category" class="note-category">
            <option v-for="category in categories" :key="category.id" :value="category.id">
              {{ category.name }}
            </option>
          </select>
          <textarea 
            class="note-content" 
            v-model="currentNote.content" 
            placeholder="写下您的笔记内容..."
          ></textarea>
        </div>
        <div class="editor-footer">
          <button class="save-btn" @click="saveNote">
            <i class="fas fa-save"></i> 保存笔记
          </button>
          <button class="cancel-btn" @click="closeEditor">
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 笔记详情模态框 -->
    <div v-if="showNoteDetail" class="note-detail-modal">
      <div class="detail-container">
        <div class="detail-header">
          <button class="back-btn" @click="closeNoteDetail">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h3>{{ selectedNote.title }}</h3>
          <span class="note-category">{{ getCategoryName(selectedNote.category) }}</span>
        </div>
        <div class="detail-meta">
          <span><i class="far fa-calendar"></i> {{ formatDate(selectedNote.date) }}</span>
          <span><i class="far fa-clock"></i> {{ selectedNote.readTime }}分钟阅读</span>
        </div>
        <div class="detail-content" v-html="selectedNote.content"></div>
        <div class="detail-footer">
          <button class="edit-btn" @click="editNote(selectedNote)">
            <i class="fas fa-edit"></i> 编辑
          </button>
          <button class="delete-btn" @click="deleteNote(selectedNote.id)">
            <i class="fas fa-trash"></i> 删除
          </button>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="notes-footer">
      <p>© 2023 生活笔记 | 记录美好生活</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航功能
const goToHome = () => {
  router.push('/')
}

// 分类数据
const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'daily', name: '日常生活' },
  { id: 'travel', name: '旅行见闻' },
  { id: 'reading', name: '读书笔记' },
  { id: 'food', name: '美食记录' },
  { id: 'inspiration', name: '灵感闪现' },
  { id: 'workout', name: '健身日志' }
])

// 当前选中的分类
const selectedCategory = ref('all')

// 搜索查询词
const searchQuery = ref('')

// 笔记数据
const notes = ref([
  {
    id: 1,
    title: '周末公园野餐记',
    excerpt: '上周末和家人一起去中央公园野餐，阳光明媚，微风拂面...',
    content: '<h2>美好的周末野餐</h2><p>上周末和家人一起去中央公园野餐，阳光明媚，微风拂面。我们准备了水果三明治和自制柠檬水，孩子们在草地上追逐玩耍。</p><p>公园里的樱花盛开，粉色的花瓣随风飘落，宛如仙境。下午我们还划了船，湖面波光粼粼，远处有天鹅游过。</p>',
    category: 'daily',
    date: new Date('2023-05-15'),
    readTime: 5,
    icon: 'fas fa-utensils',
    bgColor: 'linear-gradient(120deg, #51cf66, #40c057)'
  },
  {
    id: 2,
    title: '京都红叶之旅',
    excerpt: '去年秋天独自一人前往京都赏枫，金阁寺的红叶与金顶相映成趣...',
    content: '<h2>京都红叶之旅</h2><p>去年秋天独自一人前往京都赏枫，金阁寺的红叶与金顶相映成趣。清晨的岚山竹林雾气缭绕，仿佛置身画中。</p><p>清水寺的夜枫尤为壮观，灯光下的枫叶红得耀眼。在祇园的小巷里，偶遇了一位艺伎匆匆走过，惊鸿一瞥。</p><h3>美食推荐</h3><p>尝试了汤豆腐和抹茶甜品，京都的怀石料理精致得让人不忍下筷。</p>',
    category: 'travel',
    date: new Date('2022-11-20'),
    readTime: 8,
    icon: 'fas fa-map-marked-alt',
    bgColor: 'linear-gradient(120deg, #f76707, #e8590c)'
  },
  {
    id: 3,
    title: '《人类简史》读后感',
    excerpt: '尤瓦尔·赫拉利的这部作品让我重新思考人类文明的发展历程...',
    content: '<h2>《人类简史》读后感</h2><p>尤瓦尔·赫拉利的这部作品让我重新思考人类文明的发展历程。从认知革命到农业革命，再到科学革命，人类如何一步步走到今天？</p><p>最震撼的观点是：人类是靠"共同想象"团结在一起的。国家、货币、宗教，这些概念只存在于我们的集体想象中，却塑造了现实。</p><h3>摘录</h3><blockquote>"快乐不在于客观条件，而在于主观期望。"</blockquote>',
    category: 'reading',
    date: new Date('2023-03-10'),
    readTime: 10,
    icon: 'fas fa-book-reader',
    bgColor: 'linear-gradient(120deg, #748ffc, #5c7cfa)'
  },
  {
    id: 4,
    title: '自制提拉米苏食谱',
    excerpt: '经过多次尝试，终于找到了完美的提拉米苏配方，咖啡和马斯卡彭的完美平衡...',
    content: '<h2>自制提拉米苏食谱</h2><h3>材料</h3><ul><li>马斯卡彭奶酪 250g</li><li>手指饼干 200g</li><li>浓缩咖啡 150ml</li><li>鸡蛋 3个</li><li>糖 60g</li><li>可可粉 适量</li></ul><h3>步骤</h3><ol><li>分离蛋黄蛋白，蛋黄加糖打发至浅黄色</li><li>加入马斯卡彭奶酪搅拌均匀</li><li>蛋白打发至硬性发泡，拌入奶酪糊</li><li>手指饼干蘸咖啡液铺底，一层奶酪糊，重复</li><li>冷藏4小时，撒可可粉</li></ol>',
    category: 'food',
    date: new Date('2023-04-22'),
    readTime: 6,
    icon: 'fas fa-ice-cream',
    bgColor: 'linear-gradient(120deg, #f783ac, #f06595)'
  }
])

// 编辑器状态
const showEditor = ref(false)
const editingNote = ref(null)
const currentNote = ref({
  id: null,
  title: '',
  content: '',
  category: 'daily',
  date: new Date(),
  readTime: 0
})

// 笔记详情状态
const showNoteDetail = ref(false)
const selectedNote = ref(null)

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(cat => cat.id === categoryId)
  return category ? category.name : '未知分类'
}

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 计算总字数
const totalWords = computed(() => {
  return notes.value.reduce((total, note) => {
    // 去除HTML标签后计算字数
    const text = note.content.replace(/<[^>]*>/g, '')
    return total + text.length
  }, 0)
})

// 过滤笔记
const filteredNotes = computed(() => {
  let result = notes.value
  
  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(note => note.category === selectedCategory.value)
  }
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(note => 
      note.title.toLowerCase().includes(query) || 
      note.excerpt.toLowerCase().includes(query) ||
      note.content.toLowerCase().includes(query)
    )
  }
  
  return result.sort((a, b) => new Date(b.date) - new Date(a.date))
})

// 打开编辑器
const openEditor = (note = null) => {
  if (note) {
    editingNote.value = note.id
    currentNote.value = {
      ...note,
      date: new Date(note.date)
    }
  } else {
    editingNote.value = null
    currentNote.value = {
      id: null,
      title: '',
      content: '',
      category: 'daily',
      date: new Date(),
      readTime: 0
    }
  }
  showEditor.value = true
}

// 关闭编辑器
const closeEditor = () => {
  showEditor.value = false
}

// 保存笔记
const saveNote = () => {
  // 计算阅读时间 (假设每分钟阅读200字)
  const contentText = currentNote.value.content.replace(/<[^>]*>/g, '')
  const readTime = Math.max(1, Math.ceil(contentText.length / 200))
  
  if (editingNote.value) {
    // 更新现有笔记
    const index = notes.value.findIndex(n => n.id === editingNote.value)
    if (index !== -1) {
      notes.value[index] = {
        ...currentNote.value,
        readTime,
        excerpt: contentText.slice(0, 50) + (contentText.length > 50 ? '...' : '')
      }
    }
  } else {
    // 创建新笔记
    const newNote = {
      ...currentNote.value,
      id: Date.now(),
      readTime,
      excerpt: contentText.slice(0, 50) + (contentText.length > 50 ? '...' : ''),
      icon: getRandomIcon(),
      bgColor: getRandomGradient()
    }
    notes.value.unshift(newNote)
  }
  
  closeEditor()
}

// 查看笔记详情
const viewNoteDetail = (note) => {
  selectedNote.value = note
  showNoteDetail.value = true
}

// 关闭笔记详情
const closeNoteDetail = () => {
  showNoteDetail.value = false
}

// 编辑笔记
const editNote = (note) => {
  closeNoteDetail()
  openEditor(note)
}

// 删除笔记
const deleteNote = (id) => {
  notes.value = notes.value.filter(note => note.id !== id)
  closeNoteDetail()
}

// 获取随机图标
const getRandomIcon = () => {
  const icons = [
    'fas fa-pen',
    'fas fa-book',
    'fas fa-camera',
    'fas fa-mug-hot',
    'fas fa-hiking',
    'fas fa-umbrella-beach',
    'fas fa-music'
  ]
  return icons[Math.floor(Math.random() * icons.length)]
}

// 获取随机渐变背景
const getRandomGradient = () => {
  const gradients = [
    'linear-gradient(120deg, #51cf66, #40c057)',
    'linear-gradient(120deg, #fcc419, #fab005)',
    'linear-gradient(120deg, #748ffc, #5c7cfa)',
    'linear-gradient(120deg, #f783ac, #f06595)',
    'linear-gradient(120deg, #9775fa, #845ef7)',
    'linear-gradient(120deg, #66d9e8, #3bc9db)',
    'linear-gradient(120deg, #ffa94d, #ff922b)'
  ]
  return gradients[Math.floor(Math.random() * gradients.length)]
}

// 初始化示例数据
onMounted(() => {
  // 可以从本地存储加载笔记
  const savedNotes = localStorage.getItem('life-notes')
  if (savedNotes) {
    notes.value = JSON.parse(savedNotes)
  }
})
</script>

<style scoped>
.notes-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #212529;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}

.notes-header {
  background: linear-gradient(120deg, #2b8a3e, #40c057);
  color: white;
  padding: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 20px;
}

.home-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.home-icon i {
  font-size: 1.8rem;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.home-icon:hover i {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.8rem;
  font-weight: 700;
  flex: 1;
}

.logo i {
  color: #69db7c;
  background: white;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.search-container {
  position: relative;
  width: 40%;
  max-width: 400px;
}

.search-container input {
  width: 100%;
  padding: 12px 20px;
  padding-left: 50px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-container input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 138, 62, 0.3);
}

.search-container i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 1.2rem;
}

.new-note-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 50px;
  background: white;
  color: #2b8a3e;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.new-note-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.notes-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.hero {
  text-align: center;
  padding: 60px 0 40px;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
  background: linear-gradient(to right, #2b8a3e, #40c057);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 30px;
  color: #6c757d;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 30px 0;
}

.category-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 50px;
  background: white;
  color: #6c757d;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.category-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.category-btn.active {
  background: linear-gradient(to right, #2b8a3e, #40c057);
  color: white;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.note-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.note-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
}

.card-content {
  padding: 25px;
}

.card-category {
  display: inline-block;
  background: #ebfbee;
  color: #2b8a3e;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 15px;
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: #212529;
}

.card-excerpt {
  color: #6c757d;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-excerpt >>> p {
  margin: 0;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  color: #6c757d;
  font-size: 0.9rem;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}

.empty-state i {
  font-size: 4rem;
  color: #e9ecef;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #6c757d;
}

.empty-state p {
  color: #6c757d;
  max-width: 500px;
  margin: 0 auto;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

.stat-card i {
  font-size: 2.5rem;
  color: #2b8a3e;
  margin-bottom: 15px;
}

.stat-card .number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #40c057;
  margin-bottom: 5px;
}

.stat-card .label {
  color: #6c757d;
  font-size: 1rem;
}

/* 编辑器模态框 */
.editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.editor-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.editor-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-header h3 {
  margin: 0;
  color: #212529;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #212529;
  transform: rotate(90deg);
}

.editor-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.note-title {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.note-category {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 15px;
}

.note-content {
  width: 100%;
  height: 300px;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
  resize: none;
  font-family: inherit;
}

.editor-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.save-btn, .cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn {
  background: #2b8a3e;
  color: white;
}

.save-btn:hover {
  background: #40c057;
}

.cancel-btn {
  background: #f1f3f5;
  color: #212529;
}

.cancel-btn:hover {
  background: #e9ecef;
}

/* 笔记详情模态框 */
.note-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.detail-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.detail-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 15px;
}

.detail-header h3 {
  margin: 0;
  color: #212529;
  flex: 1;
}

.back-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  color: #212529;
}

.note-category {
  background: #ebfbee;
  color: #2b8a3e;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
}

.detail-meta {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  gap: 20px;
  color: #6c757d;
  font-size: 0.9rem;
}

.detail-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.detail-content >>> h2 {
  color: #2b8a3e;
  margin-top: 20px;
  margin-bottom: 15px;
}

.detail-content >>> h3 {
  color: #495057;
  margin-top: 15px;
  margin-bottom: 10px;
}

.detail-content >>> p {
  margin-bottom: 15px;
  line-height: 1.7;
}

.detail-content >>> ul, 
.detail-content >>> ol {
  margin-bottom: 15px;
  padding-left: 20px;
}

.detail-content >>> blockquote {
  border-left: 4px solid #40c057;
  padding-left: 15px;
  margin-left: 0;
  color: #495057;
  font-style: italic;
}

.detail-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.edit-btn, .delete-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-btn {
  background: #fcc419;
  color: #212529;
}

.edit-btn:hover {
  background: #fab005;
}

.delete-btn {
  background: #ff6b6b;
  color: white;
}

.delete-btn:hover {
  background: #fa5252;
}

.notes-footer {
  text-align: center;
  padding: 30px 0;
  margin-top: 60px;
  color: #6c757d;
  border-top: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
  }
  
  .logo {
    order: 1;
    flex: 100%;
    justify-content: center;
    margin-bottom: 15px;
  }
  
  .search-container {
    order: 3;
    width: 100%;
    margin-top: 15px;
  }
  
  .new-note-btn {
    order: 2;
  }
  
  .hero h1 {
    font-size: 2.2rem;
  }
  
  .content {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    min-width: 150px;
  }
  
  .editor-container, .detail-container {
    width: 95%;
  }
  
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .detail-header h3 {
    margin-top: 10px;
  }
}
</style>